import React, { Component } from 'react'
// import Child from '../Child'
import './index.css'

export default class Demo extends Component {
  state = {
    hasError: '' // 定义出错的信息
  }

  static getDerivedStateFromError(error) {
    console.log('error-->', error)
    return { hasError: error }
  }

  componentDidCatch() {
    console.log('渲染组件出错')
  }

  render() {
    const { hasError } = this.state
    console.log('hasError-->', hasError)
    return (
      <div className="parent">
        <h2>我是 parent 组件</h2>
        {hasError ? <h2>当前网络错误，请稍后重试</h2> : <Child />}
      </div>
    )
  }
}

class Child extends Component {
  render() {
    return (
      <div className="a">
        {'abc'.map((item) => {
          return <li>{item}</li>
        })}
      </div>
    )
  }
}
